import { getWorkshopList } from "@/apis/advertising/account";
import {
    Card,
    Form,
    Grid,
    DatePicker,
    Select,
    Space,
    Button,
    Table,
    Modal,
    InputNumber,
    Divider,
  } from "@arco-design/web-react";
  import {
    IconDownload,
    IconPlus,
    IconRefresh,
  } from "@arco-design/web-react/icon";
  import { IconSearch } from "@arco-design/web-react/icon";
import dayjs from "dayjs";
  import { useEffect, useState } from "react";
  const { Row, Col } = Grid;
  const { RangePicker } = DatePicker;
  type AddFormType = {
    date: string;
    water: number;
    electricity: number;
    gas: number;
  };
  type QueryFormType = {
    date: string;
    energyType: number;
  };
  export default function index() {
    const [loading, setLoading] = useState(false);
    const [visible, setVisible] = useState(false);
    const [addForm] = Form.useForm<AddFormType>();
    const [queryForm] = Form.useForm<QueryFormType>();
    const [data,setData] = useState([])
    useEffect(() => {
      getWorkshopList().then((res:any) => {
        const data = res.map(item=>{
          return {
            date:dayjs(item.date).format('YYYY-MM-DD'),
            dye_water_cost:parseFloat(item.dye_water_cost).toFixed(1),
            dye_elec:parseFloat(item.dye_elec).toFixed(1),
            dye_steam:parseFloat(item.dye_steam).toFixed(1),
            print_water_cost:parseFloat(item.print_water_cost).toFixed(1),
            print_elec:parseFloat(item.print_elec).toFixed(1),
            print_steam:parseFloat(item.print_steam).toFixed(1),
            gas_cost:parseFloat(item.gas_cost).toFixed(1)
          }
        })
        setData(data)
        let dye_water = 0
        let dye_elec = 0
        let dye_steam = 0
        let print_water = 0
        let print_elec = 0
        let print_steam = 0
        data.slice(0,334).forEach(item=>{
          dye_water+= parseFloat(item.dye_water_cost)
          dye_elec+= parseFloat(item.dye_elec)
          dye_steam+= parseFloat(item.dye_steam)
          print_water+= parseFloat(item.print_water_cost)
          print_elec+=parseFloat(item.print_elec)
          print_steam+=parseFloat(item.print_steam)
        })
        console.log('111',dye_water,dye_elec,dye_steam,print_water,print_elec,print_steam)
      });
    }, []);
    const handleDetial = (item,type?:string) => {
      console.log(item,type);
    }
    const handleDelete = (item) => {
      console.log(item);
    }
    const handleSubmitQuery = () => {
      try{
        queryForm.validate();
        console.log(queryForm.getFields());
      }catch(error){
        console.log(error);
      }
    };
    const handleSubmitAdd = async () => {
      try {
        await addForm.validate();
        console.log(addForm.getFields());
      } catch (error) {
        console.log(error);
      }
    };
    const handleReset = () => {
      queryForm.resetFields();
    };
    const handleExport = () => {};
    const handleAdd = () => {
      setVisible(true);
    };
    const columns = [
      {
        title: "日期",
        dataIndex: "date",
        fixed: "left",
      },
      {
        title: "染色用水",
        dataIndex: "dye_water_cost",
      },
      {
        title:"染色用电",
        dataIndex:"dye_elec"
      },
      {
        title:"染色蒸汽",
        dataIndex:"dye_steam"
      },
      {
        title: "印花用水",
        dataIndex: "print_water_cost",
      },
      {
        title:"印花用电",
        dataIndex:"print_elec"
      },
      {
        title:"印花蒸汽",
        dataIndex:"print_steam"
      },
      {
        title:"天然气",
        dataIndex:"gas_cost"
      },
      {
        title: "操作",
        fixed: "right",
        width:150,
        render: (_: any, item) => (
          <div className="flex justify-center items-center gap-2 text-blue-500">
            <span
              onClick={() => handleDetial(item)}
            >
              查看
            </span>
            <span
              onClick={() => handleDelete(item)}
            >
              删除
            </span>
            <span
              onClick={() => handleDetial(item,'edit')}
            >
              编辑
            </span>
          </div>
        ),
      },
    ].map(col=>({
      ...col,
      align:'center'
    }));
    return (
      <div>
        <Card>
          <div className="flex">
            <Form form={queryForm} onSubmit={handleSubmitQuery}>
              <Row gutter={24}>
                <Col span={12}>
                  <Form.Item label="选择日期" field="date">
                    <DatePicker showTime format="YYYY-MM-DD" />
                  </Form.Item>
                </Col>
                {/* <Col span={12}>
                  <Form.Item label="选择种类" field="energyType">
                    <Select
                      style={{ width: "200px" }}
                      options={[
                        {
                          label: "染色水",
                          value: 1,
                        },
                        {
                          label: "电",
                          value: 2,
                        },
                        {
                          label: "气",
                          value: 3,
                        },
                      ]}
                      placeholder="请选择能耗种类"
                    />
                  </Form.Item>
                </Col> */}
              </Row>
            </Form>
            <Divider type="vertical" />
            <Space
              direction={"vertical"}
              className={"flex justify-center pl-5 mr-5"}
            >
              <Button
                loading={loading}
                type="primary"
                icon={<IconSearch />}
                onClick={handleSubmitQuery}
              >
                查询
              </Button>
              <Button
                loading={loading}
                type="primary"
                icon={<IconRefresh />}
                onClick={handleReset}
              >
                重制
              </Button>
            </Space>
          </div>
        </Card>
        <Space />
        <Card>
          <Button
            type="primary"
            className="mb-2"
            icon={<IconPlus />}
            onClick={handleAdd}
          >
            添加数据
          </Button>
          <Table scroll={{ x: 1142 }} columns={columns} data={data} alien/>
        </Card>
        <Modal
          title="添加数据"
          visible={visible}
          onCancel={() => setVisible(false)}
          onOk={handleSubmitAdd}
          maskClosable={false}
        >
          <Form form={addForm} onSubmit={handleSubmitAdd}>
            <Form.Item
              label="日期"
              field="date"
              rules={[{ required: true, message: "请选择日期" }]}
            >
              <DatePicker showTime format="YYYY-MM-DD" style={{width:'250px'}} />
            </Form.Item>
            <Form.Item
              label="水"
              field="water"
              rules={[{ required: true, message: "请输入水" }]}
            >
              <InputNumber style={{width:'250px'}} placeholder="请输入水"/>
            </Form.Item>
            <Form.Item
              label="电"
              field="electricity"
              rules={[{ required: true, message: "请输入电" }]}
            >
              <InputNumber style={{width:'250px'}} placeholder="请输入电"/>
            </Form.Item>
            <Form.Item
              label="气"
              field="gas"
              rules={[{ required: true, message: "请输入气" }]}
            >
              <InputNumber style={{width:'250px'}} placeholder="请输入气"/>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
  